<template>
	<scroll-view 
			direction="vertical" 
			bounces="true" 
			:scroll-y="true" 
			@scrolltolower="get(info.page+1)" 
			style="height: 100vh;background-color: rgb(245, 245, 245);">
		<view class="bigbox">
			<!-- 顶部 -->
			<view class="msg">
				<!-- 左侧全部消息 -->
				<view :class="info.status==-1?'allmsg msgactive':'allmsg'"  @click="info.status=-1;info.hasMore=true;get(1)">
						<view class="read">
							<span style="color: aliceblue;position: absolute;left: 8%;top:35%;font-weight: 600;font-size: 20px;letter-spacing: 1px;">全部消息</span>
							<u-icon name="volume-fill" color="#ffffff" size="56" style="position: absolute;right: 7%;top: 20%;opacity: .2;"></u-icon>
						</view>
				</view>
				<!-- 中间已读消息 -->
				<view :class="info.status==1?'readmsg msgactive':'readmsg'" @click="info.status=1;info.hasMore=true;get(1)">
					<view class="read">
						<span style="color: aliceblue;position: absolute;left: 8%;top:35%;font-weight: 600;font-size: 20px;letter-spacing: 1px;">已读消息</span>
						<u-icon name="bell-fill" color="#ffffff" size="56" style="position: absolute;right: 5%;top: 20%;opacity: .2;"></u-icon>
					</view>
				</view>
				<view :class="info.status==1?'missmsg msgactive':'missmsg'" style="margin-right: 20px;" @click="info.status=0;info.hasMore=true;get(1)">
					<view class="read" v-if="missnum>0">
						<view class="missinfo">
							{{missnum}}
						</view>
						
						<span style="color: aliceblue;position: absolute;left: 8%;top:35%;font-weight: 600;font-size: 20px;letter-spacing: 1px;">未读消息</span>
						<u-icon name="email-fill" color="#ffffff" size="56" style="position: absolute;right: 5%;top: 20%;opacity: .2;"></u-icon>
					</view>
				</view>
			</view>

			<!-- 中间消息列表 -->
			<view class="midmsg" v-for="(item,index) in data" @click="todetail(item)">
				<!-- 上层内容 头像、删除-->
				<view class="upcontent">
					<!-- 头像换成图标 -->
					<view class="userimg">
						<u-icon name="account-fill" color="#ffffff" size="26" style="margin: 2px;"></u-icon>
					</view>
					<view class="msgrole">
						<span style="color: rgb(0, 0, 0);font-size: 16px;font-weight:bold;position: absolute;left: 5%;top:1%;">
							系统消息
							</span>
					</view>
					<view class="delcontent" @click="delmsg(item.id)">
						<view class="delbtn">
							<u-icon name="trash"  size="20" style="position: absolute;top:20%;left:20%;"></u-icon>
						</view>
					</view>
				</view>
				<!-- 中层内容需要进行判断，有没有图片之类的如果没有的话就没有，有的话就要做好图片 -->
				<view class="midtitle" >
					<span class="text-ellipsis-2lines" style="font-size: 18px;font-weight: 600;letter-spacing: 1px;color: rgb(0, 0, 0);-webkit-line-clamp: 1;">{{item.title}}</span>
				</view>
				<!-- 中层内容 -->
				<view class="content" >
					<view class="text-ellipsis-5lines" style="color: grey;font-size: 14px;letter-spacing: 1px;margin-left: 5px;">
						{{item.desc}}
						<!-- 如果有图片 自己加判断条件 -->
						<view class="contentimg" v-if="item.img" style="margin-top: 10px;">
							<u--image
							    :src="item.img"
							    width="100%"
								mode="aspectFit"
							  ></u--image>
						</view>
					</view>
				</view>
				<hr style="opacity: 0.2;margin-left: 8px;margin-top: 10px;"/>
				
				<!-- 下层内容 -->
				<view class="downcontent">
					<!-- 日期 -->
					<view class="datetime">
						<span style="color: lightgrey;font-size: 16px;margin-left: 8px;">{{$u.timeFormat(item.c_time, 'yyyy年mm月dd日')}}</span>
					</view>
					<u-tag  
					style="margin-top: 3px;" 
					size="large"
					plain
					:text="item.type === 1 ? '普通' : item.type === 2 ? '重要' : '紧急'"
					:type="item.type === 1 ? 'success' : item.type === 2 ? 'warning' : 'error'">
					</u-tag>
				</view>
			</view>
			
			<view v-if="loading" style="position: relative;height: 40px;">
				 <view class="loading-spinner"></view>
				<span style="position: absolute;left: 45%;margin-top: 10px;color: lightgray;">加载中...</span>
			</view>
			<view v-else style="position: relative;height: 40px;">
				<span style="position: absolute;left: 40%;margin-top: 10px;color: lightgray;">没有更多数据了...</span>
			</view>
			<view v-if="data.length === 0 " style="position: relative;height: 40px;height: 100vh;">
				<u-empty
				        mode="message"
						style="position:absolute; top:40%;left: 40%;"
				>
				</u-empty>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	export default {
		
		data() {
			return {
				show:false,
				//测试用   图片显示 正式对接数据可以删掉
				image:0,
				info:{
					page:1,
					page_num:5,
					hasMore:true,
					status:-1
				},
				//下拉加载时
				loading:false,
				//上拉刷新时
				refreshed:false,
				activeTab: 'all',
				missnum:0,
				msgData:[],
				data:[]
			}
		},
		onLoad(){
			this.get()
		},
		methods: {
		
			get(page){
				
				if(page){
					this.info.page = page;
					
				}
				if(!this.info.hasMore){
					return;
				}
				console.log(this.info);
				if(this.info.page==1){
					this.data = [];
				}
				
				this.moxiPost('/user/user/get_msg',this.info,(res)=>{
					console.log(res);
					if(res.unread){
						this.missnum = res.unread;
						
					}
					if(res.data.allpage > res.data.page){
						this.info.hasMore = true;
					}else{
						this.info.hasMore = false;
					}
					for(let k in res.data.data){
						this.data.push(res.data.data[k])
					}
				})
			},
			//请求接口删除
			delmsg(id){
				this.isBox('确认是否删除?',()=>{
					this.moxiPost(
					'user/user/del_msg',{'id':id},
					(res)=>{
						for(let k in this.data){
							if(this.data[k].id == id){
								this.data.splice(k,1)
								break;
							}
						}
					})
				},'删除后无法撤销，请谨慎操作!')
			},
			todetail(data){
				uni.setStorageSync('currentMessageInfo', data);
				this.navto('pages/index/msgdetail');
			}
		}
	}
</script>

<style>
	.text-ellipsis-5lines {
	  display: -webkit-box;          /* 关键属性 */
	  -webkit-box-orient: vertical;  /* 文本垂直排列 */
	  -webkit-line-clamp: 5;         /* 限制显示行数 */
	  overflow: hidden;              /* 隐藏超出内容 */
	  text-overflow: ellipsis;       /* 超出显示... */
	  word-break: break-all;         /* 长单词换行处理 */
	}
	.text-ellipsis-2lines {
	  display: -webkit-box;          /* 关键属性 */
	  -webkit-box-orient: vertical;  /* 文本垂直排列 */
	  -webkit-line-clamp: 2;         /* 限制显示行数 */
	  overflow: hidden;              /* 隐藏超出内容 */
	  text-overflow: ellipsis;       /* 超出显示... */
	  word-break: break-all;         /* 长单词换行处理 */
	}
	.missinfo{
		border-radius: 15px;
		padding: 2px 8px;
		color:#fff;
		position: absolute;
		display: flex;
		top:-5%;
		right: -5%;
		background-color: rgba(255, 0, 0, 0.8);
	}
	.loading-spinner {
	    position: absolute;
	    left: 40%;
	    top: 10px;
	    width: 16px;
	    height: 16px;
	    border: 2px solid #ccc;
	    border-top: 2px solid #007aff;
	    border-radius: 50%;
	    animation: spin 1s linear infinite;
	}
	
	@keyframes spin {
	    0% { transform: rotate(0deg); }
	    100% { transform: rotate(360deg); }
	}
	.bigbox{
		
		height: 100vh;
	}
	.msg{
		width: 100%;
		height: 100px;
		display: flex;
		/* margin: auto; */
		border-radius: 5px;
		margin-top: 10px;
		margin-left: 10px;
		margin-bottom: 10px;
		position: relative;
		gap:10px;
		
	}
	.read{
		position: relative;
		width: 100%;
		height: 100px;
	}
	.allmsg{
		border-radius: 5px;
		display: flex;
		flex:1;
		background-color: #877FF8;
	}
	.readmsg{
		border-radius: 5px;
		display: flex;
		flex:1;
		background-color: #2E81F8;
	}
	.missmsg{
		border-radius: 5px;
		display: flex;
		flex:1;
		background-color: #ff8b01;
		
	}
	.msgactive{
		box-shadow: 5px 5px 12px 5px rgba(0, 0, 0, 0.25); 
		/* transform: translateY(-5px); */
		/* transition: all 0.5s ease; */
		border-radius: 4px;
	}
	
	.midmsg{
		width: 85%;
		margin: auto;
		padding: 20px;
		margin-top: 20px;
		border-radius: 8px;
		background-color: #fff;
	}
	.upcontent{
		display: flex;
		border-radius: 8px;
		justify-content: space-between;
		align-items: center;
	}
	.msgrole{
		position: relative;
		width: 100%;
		height: 20px;
	}
	.delbtn{
		width: 32px;
		height: 32px;
		border-radius: 50%;
		background-color: rgb(235, 239, 251);
		margin-right: 5px;
		position: relative;
	}
	.userimg{
		width: 38px;
		height: 32px;
		border-radius: 50%;
		background-color: black;
	}
	.midtitle{
		margin-left: 5px;
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.downcontent{
		display: flex;
		justify-content: space-between;
		align-items: center;
		align-content: center;
		/* background-color: red; */
	}
	.checknum{
		display: flex;
	}
	@media screen  and (max-width: 632px){
		.allmsg{
			border-radius: 5px;
			flex:1;
			display: flex;
			background-color: #877FF8;
		}
		.missmsg{
			border-radius: 5px;
			flex:1;
			display: flex;
			gap:10px;
			background-color: #ff8b01;
		}
	}
	@media screen  and (max-width: 375px){
		.allmsg{
			border-radius: 5px;
			flex:1;
			display: flex;
			background-color: #877FF8;
		}
		.missmsg{
			border-radius: 5px;
			flex:1;
			display: flex;
			background-color: #ff8b01;
		}
		}
	
</style>
